@charset "utf-8";
@import "common.scss";
* {
    margin: 0;
    padding: 0;
    
    a {
        text-decoration: none;
        color: black;
    }
}

body {
    background: #f5f5f5;
}

.wrap {
    width: 100%;
    .section {
       
        .search-result {
            margin: {
                top: 28px;
                bottom: 44px;
                left: 101px;
            }
            width: 175px;
            >p {
                font-size: 18px;
            }
        }
        .introduce {
            margin: {
                left: 101px;
            }
            width: 371px;
            height: 100px;
            >table {
                width: 371px;
                height: 100px;
                tr {
                    td {
                        &:first-child {
                            color: #b1b1b1;
                        }
                    }
                }
            }
        }
        .goods-list {
            font-size: 12px;
            width: 1112px;
           
            margin: 0 auto;
            .selecter {
                margin-bottom: 9px;
                width: 100%;
                height: 32px;
                background: #d8d8d8;
                select {
                    margin-top: 6px;
                    display: inline-block;
                    vertical-align: middle;
                }
                span {
                    margin-top: 6px;
                    margin-left: 21px;
                    display: inline-block;
                    vertical-align: middle;
                }
            }
            .img-list {
                width: 1112px;
                .list-box-item {
                    list-style: none;
                    width: 270px;
                    height: 376px;
                    background: #e4e4e4;
                    float: left;
                    margin: {
                        left: 10px;
                        bottom: 18px;
                    }
                    img {
                        width: 270px;
                        height: 270px;
                    }
                    img:hover{
                        animation:rotateOut 800ms ease-out infinite alternate;;
                    }
                    @keyframes rotateOut {
                      from {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        transform: scale(1.2);
                        opacity: 1;
                      }
                      to {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate3d(0, 6, 0, 200deg);
                        transform: rotate3d(0, 6, 0, 200deg);
                        opacity: 1;
                        border-color: #e51a45;
                        box-shadow: 0 0 100px slateblue;
                      }
                    }
                    &:first-of-type,
                    &:nth-of-type(5),
                    &:nth-of-type(9) {
                        margin-left: 0px;
                    }
                    p {
                        margin-left: 11px;
                        &:first-of-type {
                            margin-top: 25px;
                        }
                    }
                }
            }
        }
    }
}